Notification

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das Notification Interface der Notifications API wird verwendet, um Desktop-Benachrichtigungen für den Benutzer zu konfigurieren und anzuzeigen.

Das Erscheinungsbild und die spezifische Funktionalität dieser Benachrichtigungen variieren je nach Plattform, bieten jedoch im Allgemeinen eine Möglichkeit, dem Benutzer asynchron Informationen bereitzustellen.

Konstruktor

Notification(): Erstellt eine neue Instanz des Notification Objekts.

Statische Eigenschaften

Erbt auch Eigenschaften von seinem Eltern-Interface, EventTarget.

Notification.permission Schreibgeschützt

Ein String, der die aktuelle Berechtigung zur Anzeige von Benachrichtigungen darstellt. Mögliche Werte sind:

denied — Der Benutzer lehnt die Anzeige von Benachrichtigungen ab.
granted — Der Benutzer akzeptiert die Anzeige von Benachrichtigungen.
default — Die Wahl des Benutzers ist unbekannt und daher wird der Browser so handeln, als ob der Wert denied wäre.

Notification.maxActions Schreibgeschützt Experimentell

Die maximale Anzahl der vom Gerät und vom Benutzer-Agent unterstützten Aktionen.

Instanz-Eigenschaften

Erbt auch Eigenschaften von seinem Eltern-Interface, EventTarget.

Notification.actions Schreibgeschützt Experimentell: Das Aktionsarray der Benachrichtigung, wie es im options Parameter des Konstruktors angegeben wurde.
Notification.badge Schreibgeschützt: Ein String, der die URL eines Bildes enthält, das die Benachrichtigung repräsentiert, wenn nicht genügend Platz zur Verfügung steht, um die Benachrichtigung selbst anzuzeigen, wie z. B. die Android-Benachrichtigungsleiste. Auf Android-Geräten sollte das Abzeichen Geräte mit bis zu 4-facher Auflösung unterstützen, etwa 96 mal 96 Pixel, und das Bild wird automatisch maskiert.
Notification.body Schreibgeschützt: Der Body-String der Benachrichtigung, wie im options Parameter des Konstruktors angegeben.
Notification.data Schreibgeschützt: Gibt eine strukturierte Kopie der Benachrichtigungsdaten zurück.
Notification.dir Schreibgeschützt: Die Schreibrichtung der Benachrichtigung, wie im options Parameter des Konstruktors angegeben.
Notification.icon Schreibgeschützt: Die URL des Bildes, das als Symbol der Benachrichtigung verwendet wird, wie im options Parameter des Konstruktors angegeben.
Notification.image Schreibgeschützt Experimentell: Die URL eines Bildes, das als Teil der Benachrichtigung angezeigt wird, wie im options Parameter des Konstruktors angegeben.
Notification.lang Schreibgeschützt: Der Sprachcode der Benachrichtigung, wie im options Parameter des Konstruktors angegeben.
Notification.renotify Schreibgeschützt Experimentell: Gibt an, ob der Benutzer benachrichtigt werden soll, nachdem eine neue Benachrichtigung eine alte ersetzt hat.
Notification.requireInteraction Schreibgeschützt: Ein boolescher Wert, der angibt, dass eine Benachrichtigung aktiv bleiben soll, bis der Benutzer sie anklickt oder schließt, anstatt automatisch zu verschwinden.
Notification.silent Schreibgeschützt: Gibt an, ob die Benachrichtigung stumm sein soll — d.h. es sollen unabhängig von den Geräteeinstellungen keine Geräusche oder Vibrationen ausgegeben werden.
Notification.tag Schreibgeschützt: Die ID der Benachrichtigung (falls vorhanden), wie im options Parameter des Konstruktors angegeben.
Notification.timestamp Schreibgeschützt Experimentell: Gibt die Zeit an, zu der eine Benachrichtigung erstellt oder anwendbar ist (Vergangenheit, Gegenwart oder Zukunft).
Notification.title Schreibgeschützt: Der Titel der Benachrichtigung, wie im ersten Parameter des Konstruktors angegeben.
Notification.vibrate Schreibgeschützt Experimentell: Gibt ein Vibrationsmuster für Geräte mit Vibrationshardware an, das ausgegeben werden soll.

Statische Methoden

Erbt auch Methoden von seinem Eltern-Interface, EventTarget.

Notification.requestPermission(): Fordert die Erlaubnis des Benutzers an, Benachrichtigungen anzuzeigen.

Instanz-Methoden

Erbt auch Methoden von seinem Eltern-Interface, EventTarget.

Notification.close(): Schließt eine Benachrichtigungsinstanz programmgesteuert.

Events

Erbt auch Events von seinem Eltern-Interface, EventTarget.

click: Wird ausgelöst, wenn der Benutzer auf die Benachrichtigung klickt.
close: Wird ausgelöst, wenn der Benutzer die Benachrichtigung schließt.
error: Wird ausgelöst, wenn die Benachrichtigung auf einen Fehler stößt.
show: Wird ausgelöst, wenn die Benachrichtigung angezeigt wird.

Beispiele

Nehmen wir folgendes grundlegendes HTML an:

html

<button onclick="notifyMe()">Notify me!</button>

Es ist möglich, eine Benachrichtigung wie folgt zu senden — hier präsentieren wir einen recht detaillierten und vollständigen Satz von Code, den Sie verwenden könnten, wenn Sie zuerst überprüfen möchten, ob Benachrichtigungen unterstützt werden, dann prüfen, ob die Erlaubnis erteilt wurde, Benachrichtigungen für den aktuellen Ursprung zu senden, dann die Erlaubnis anfordern, falls erforderlich, bevor dann eine Benachrichtigung gesendet wird.

function notifyMe() {
  if (!("Notification" in window)) {
    // Check if the browser supports notifications
    alert("This browser does not support desktop notification");
  } else if (Notification.permission === "granted") {
    // Check whether notification permissions have already been granted;
    // if so, create a notification
    const notification = new Notification("Hi there!");
    // …
  } else if (Notification.permission !== "denied") {
    // We need to ask the user for permission
    Notification.requestPermission().then((permission) => {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        const notification = new Notification("Hi there!");
        // …
      }
    });
  }

  // At last, if the user has denied notifications, and you
  // want to be respectful there is no need to bother them anymore.
}

Wir zeigen kein Live-Beispiel mehr auf dieser Seite, da Chrome und Firefox es nicht mehr erlauben, Benachrichtigungsberechtigungen von Cross-Origin-<iframe>s anzufordern, mit anderen Browsern, die folgen werden. Um ein Beispiel in Aktion zu sehen, werfen Sie einen Blick auf unser To-do-Listen-Beispiel (siehe auch die laufende App).

Hinweis: Im obigen Beispiel erzeugen wir Benachrichtigungen als Reaktion auf eine Benutzeraktion (Klicken auf einen Button). Dies ist nicht nur bewährte Praxis — Sie sollten Benutzer nicht mit Benachrichtigungen überhäufen, denen sie nicht zugestimmt haben — sondern zukünftig werden Browser ausdrücklich Benachrichtigungen nicht zulassen, die nicht als Reaktion auf eine Benutzeraktion ausgelöst wurden. Firefox tut dies bereits ab Version 72, zum Beispiel.

Spezifikationen

Specification
Notifications API # api

Browser-Kompatibilität

Siehe auch

Verwendung der Notifications API